<template>
  <view class="course-item" :class="{'column': isColumn}" @click="clickCourse">
    <view class="left">
      <image :src="course.coverImg" mode=""></image>
      <text>04:03:00</text>
    </view>
    <view class="right column">
      <!-- 课程标题 -->
      <text class="title">{{course.title}}</text>
      <!-- 课程信息 -->
      <view class="info">
        <view class="nickname iconfont icon-laoshi2">{{course.teacherName}}</view>
        <view class="count">
          <view class="money iconfont icon-moneybag">{{course.price || '免费'}}</view>
          <view class="iconfont icon-video">{{course.studyTotal}}人在学</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      // 图片和文字 是否是竖着排列
      isColumn: {
        type: Boolean,
        default: false
      },
      course: {
        type: Object,
        default: () => ({
          id: 1,
          coverImg: '/static/images/banner1.jpg',
          title: 'SpringBoot基础入门到高级项目实战深入分析底层架构',
          teacherName: '啊哈C',
          price: 299,
          studyTotal: 1234
        })
      }
    },
    methods: {
      clickCourse() {
        console.log('点击了课程', this.course)
        uni.navigateTo({
          url: `/pages/course/course-details?courseId=${this.course.id}`
        })
      }
    }
  }
</script>

<style lang="scss">
  .course-item {
    display: flex;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #F1F1F1;
    .left {
      position: relative;
      width: 290rpx;
      height: 160rpx;
      margin-right: 20rpx;
      >image {
        width: 100%;
        height: 100%;
        border-radius: 10rpx;
      }
      >text {
        position: absolute;
        background: rgba(51, 51, 51, 0.4);
        color: #FFFFFF;
        font-size: 22rpx;
        border-radius: 20rpx;
        bottom: 5rpx;
        right: 5rpx;
        padding: 0 6rpx;
      }
    }
    .right {
      // 主轴是y，类名 column
      justify-content: space-between;
      .title {
        max-width: 365rpx;
        height: 70rpx;
        line-height: 35rpx;
        font-size: 28rpx;
        // 标题两行显示，超出部分用哪个省略号显示
        overflow: hidden; 
        text-overflow: ellipsis;
        -webkit-line-clamp: 2; //设置显示的行数
        display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示
        -webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列方式 纵向
        white-space: normal;// 空白会被浏览器忽略
        
      }
      .info {
        .nickname {
          font-size: 23rpx;
          color: #999;
        }
        .count {
          display: flex;
          align-items: center;
          .iconfont {
            font-size: 23rpx;
            color: #222222;
          }
          .money {
            width: 130rpx;
            font-size: 28rpx;
            margin-right: 30rpx;
            color: $mxg-color-orange;
          }
        }
      }
    }
  }
</style>
